<template>
  <div>
    <div class="pc">
      <div class="header_header">
        <div v-if="indexshow" class="header_nav">
          <div class="log">
            <img src="../../assets/images/index/logo.png" alt />
            <div class="wz">- 银行积分快速变现 -</div>
          </div>
          <ul>
            <li v-for="(item,index) in navlist" :key="index" @click="change(index)">
              {{item}}
              <div :class="['liline',nav_index == index ? 'liline_item' :'']"></div>
            </li>
          </ul>
        </div>
        <div v-else class="header_nav header_nav_two">
          <div class="log">
            <img src="../../assets/images/header/logo.png" alt />
            <div class="wz wz_two">- 银行积分快速变现 -</div>
          </div>
          <ul>
            <li v-for="(item,index) in navlist" :key="index" @click="change(index)">
              {{item}}
              <div :class="['liline',nav_index == index ? 'liline_item' :'']"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 手机端头部 -->
    <div class="mob">
      <div :class="['m_header', right_menu? 'web-nav-mobile-hide':'' ]">
        <img class="logo" src="../../assets/images/header/m_logo.png" @click="toindex" alt />
        <img class="menu" @click="setMenu()" src="../../assets/images/header/fl.png" />
      </div>
      <div :class="right_menu ? 'web-right-menu web-right-menu-show' : 'web-right-menu'">
        <mobile-menu @close="closeMenu"></mobile-menu>
      </div>
    </div>
  </div>
</template>

<script>
import mobileMenu from "@/components/mobilemenu/mobilemenu.vue";

export default {
  components: { mobileMenu },
  data() {
    return {
      navlist: ["首页", "产品介绍", "行业资讯", "关于我们"],
      nav_index: 0,
      nowPath: "",
      indexshow: true,
      // 移动端
      right_menu: false
    };
  },
  watch: {
    $route: {
      handler(val) {
        //  window.console.log(val)
        if (val.path == "/index/index") {
          this.nav_index = 0;
        } else if (val.path == "/product/product") {
          this.nav_index = 1;
        } else if (val.path == "/industry/industry") {
          this.nav_index = 2;
        } else if (val.path == "/industry/detail") {
          this.nav_index = 2;
        } else {
          this.nav_index = 3;
        }
        if (val.path != "/index/index") {
          this.indexshow = false;
        } else {
          this.indexshow = true;
        }
      }
    }
  },
  methods: {
    change(key) {
      if (this.nav_index == key) return;
      this.nav_index = key;
      switch (key) {
        case 0:
          this.$router.push({ path: "/index/index" });
          break;
        case 1:
          this.$router.push({ path: "/product/product" });
          break;
        case 2:
          this.$router.push({ path: "/industry/industry" });
          break;
        case 3:
          this.$router.push({ path: "/about/about" });
          break;

        default:
          break;
      }
    },
    // 移动端
    //打开关闭菜单
    setMenu() {
      this.right_menu = this.right_menu ? false : true;
    },
    toindex() {
      this.$router.push("/index/index");
    },
    //关闭菜单
    closeMenu() {
      this.right_menu = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../../assets/scss/headernav/headernav.css");
</style>